import { Graph, Shape, Addon } from "@antv/x6";

var graph = "";

export const initGraph = () => {
  // 这里可以的话定义成全局变量会好点, 毕竟说不定那个方法就要使用这些东西.
  const stencil = new Addon.Stencil({
    // 这里注释掉的原因如下图
    // title: '流程图',
    // collapsable: true,
    target: graph,
    stencilGraphWidth: 200,
    stencilGraphHeight: 180,
    groups: [
      {
        title: "基础流程图",
        name: "group1"
      }
    ],
    layoutOptions: {
      columns: 2,
      columnWidth: 80,
      rowHeight: 55
    }
  });
  let appendChildTemp = document.getElementById("stencil");
  if (appendChildTemp) {
    appendChildTemp.appendChild(stencil.container);
  }

  // 初始化连接线能链接的点
  const ports = {
    groups: {
      top: {
        position: "top",
        attrs: {
          circle: {
            r: 4,
            magnet: true,
            stroke: "#5F95FF",
            strokeWidth: 1,
            fill: "#fff",
            style: {
              // 设置隐藏,在通过事件鼠标移动显示
              visibility: "hidden"
            }
          }
        }
      },
      right: {
        position: "right",
        attrs: {
          circle: {
            r: 4,
            magnet: true,
            stroke: "#5F95FF",
            strokeWidth: 1,
            fill: "#fff",
            style: {
              visibility: "hidden"
            }
          }
        }
      },
      bottom: {
        position: "bottom",
        attrs: {
          circle: {
            r: 4,
            magnet: true,
            stroke: "#5F95FF",
            strokeWidth: 1,
            fill: "#fff",
            style: {
              visibility: "hidden"
            }
          }
        }
      },
      left: {
        position: "left",
        attrs: {
          circle: {
            r: 4,
            magnet: true,
            stroke: "#5F95FF",
            strokeWidth: 1,
            fill: "#fff",
            style: {
              visibility: "hidden"
            }
          }
        }
      }
    },
    items: [
      {
        group: "top"
      },
      {
        group: "right"
      },
      {
        group: "bottom"
      },
      {
        group: "left"
      }
    ]
  };

  // 初始化自定义图形
  Graph.registerNode(
    "custom-polygon",
    {
      inherit: "polygon",
      width: 66,
      height: 36,
      markup: [
        {
          tagName: "polygon",
          selector: "body"
        },
        {
          tagName: "text",
          selector: "label"
        }
      ],
      attrs: {
        body: {
          strokeWidth: 1,
          stroke: "#5F95FF",
          fill: "#EFF4FF"
        },
        text: {
          fontSize: 12,
          fill: "#262626"
        }
      },
      ports: {
        ...ports
        // items: [ // 这里是限制连接点多少个的地方
        //   {
        //     group: 'top',
        //   },
        //   {
        //     group: 'bottom',
        //   },
        // ],
      }
    },
    true
  );

  Graph.registerNode(
    "custom-circle",
    {
      inherit: "circle",
      width: 45,
      height: 45,
      markup: [
        {
          tagName: "circle",
          selector: "body"
        },
        {
          tagName: "text",
          selector: "label"
        }
      ],
      attrs: {
        body: {
          strokeWidth: 1,
          stroke: "#5F95FF",
          fill: "#EFF4FF"
        },
        text: {
          fontSize: 12,
          fill: "#262626"
        }
      },
      ports: { ...ports }
    },
    true
  );

  Graph.registerNode(
    "custom-rect",
    {
      inherit: "rect",
      width: 66,
      height: 36,
      markup: [
        {
          tagName: "rect",
          selector: "body"
        },
        {
          tagName: "text",
          selector: "label"
        }
      ],
      attrs: {
        body: {
          strokeWidth: 1,
          stroke: "#5F95FF",
          fill: "#EFF4FF"
        },
        text: {
          fontSize: 12,
          fill: "#262626"
        }
      },
      ports: { ...ports }
    },
    true
  );

  // 创建节点图形
  const r1 = graph.createNode({
    shape: "custom-rect",
    label: "开始",
    attrs: {
      body: {
        rx: 20,
        ry: 26
      }
    }
  });
  const r2 = graph.createNode({
    shape: "custom-rect",
    label: "过程"
  });
  const r3 = graph.createNode({
    shape: "custom-rect",
    attrs: {
      body: {
        rx: 6,
        ry: 6
      }
    },
    label: "可选过程"
  });
  const r4 = graph.createNode({
    shape: "custom-polygon",
    attrs: {
      body: {
        refPoints: "0,10 10,0 20,10 10,20"
      }
    },
    label: "决策"
  });
  const r5 = graph.createNode({
    shape: "custom-polygon",
    attrs: {
      body: {
        refPoints: "10,0 40,0 30,20 0,20"
      }
    },
    label: "数据"
  });
  const r6 = graph.createNode({
    shape: "custom-circle",
    label: "连接"
  });
  stencil.load([r1, r2, r3, r4, r5, r6], "group1");

  // 控制连接桩显示/隐藏
  const showPorts = (ports, show) => {
    for (let i = 0, len = ports.length; i < len; i = i + 1) {
      ports[i].style.visibility = show ? "visible" : "hidden";
    }
  };

  // 移入节点
  graph.on("node:mouseenter", () => {
    const container = document.getElementById("orgAndPersonnelContainer"); // 这里获取id 是你画板的id
    if (container) {
      const ports = container.querySelectorAll(".x6-port-body");
      showPorts(ports, true);
    }
  });

  // 移出节点
  graph.on("node:mouseleave", () => {
    const container = document.getElementById("orgAndPersonnelContainer"); // 这里获取id 是你画板的id
    if (container) {
      const ports = container.querySelectorAll(".x6-port-body");
      showPorts(ports, false);
    }
  });
};
